<template>
  <div>
    <el-table :data="tableDataValue" style="width: 100%">
      <slot name="info"></slot>
      <slot></slot>
    </el-table>
    <div class="page">
      <el-page :num="num" :total="total"></el-page>
    </div>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.page {
  margin-top: 15px;
}
</style>

<script>
const page = () => import("./page.vue");
export default {
  data() {
    return {
      tableDataValue: [],
    };
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    num: {
      type: Number,
    },
  },
  components: {
    "el-page": page,
  },
  // watch: {
  //   // console.log("2222222", this.num);
  //   let { tableData } = this.$props;
  //   console.log("tableData", tableData);
  //   tableDataValue = [...tableData];
  // },
  computed: {
    total() {
      return this.tableData.length;
    },
  },
  methods: {
    updatetableData(val) {
      console.log(val);
      this.tableDataValue = [...val];
    },
  },
  watch: {
    tableData(newValue, oldValue) {
      // console.log("tableData", newValue);
      this.tableDataValue = [...newValue];
    },
  },
};
</script>
